<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>粉丝</title>
    <link rel="stylesheet" href="/static/plugs/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/base.css">
    <link rel="stylesheet" href="/static/css/normalize.css">
    <link rel="stylesheet" href="/static/plugs/liuyangPage/index.css">
    <script src="/static/plugs/jquery/jquery-3.1.1.min.js"></script>
    <script src="/static/plugs/bootstrap/jquery.slim.min.js"></script>
    <script src="/static/plugs/bootstrap/bootstrap.bundle.min.js"></script>
    <script src="/initial.js"></script>
    <style>
        .wrap{
            width: 1440px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .search-header{
            width: 1440px;
            height: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /*border: 1px red solid;*/
            .search-title-wrap{
                display: flex;
                justify-content: center;
                align-items: center;
                .search-title-icon{
                    width: 48px;
                    height: 48px;
                    background: url("/static/images/logo.png") 100% 100%;
                    background-size: contain;
                    margin-right: 20px;
                }
                .search-title a{
                    color:darkmagenta;
                    font-size: 24px;
                    font-weight: bold;
                }
            }
            .search-input-wrap{
                width: 650px;
                height: 80px;
                display: flex;
                align-items: center;
                /*background: grey;*/
            }
            .search-input-wrap input{
                width: 650px;
                height: 60px;
                padding-left: 30px;
                border-radius: 40px;
                border:0.1pt solid rgba(220, 220, 220, 0.8);
            }
            .user-wrap{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                .msg-wrap{
                    margin-right: 20px;
                    display: flex;
                    flex-direction: row;
                }
                .msg-icon{
                    width: 24px;
                    height: 24px;
                    margin-right: 5px;
                    background: url("/static/images/bell2.png") 100% 100%;
                    background-size: contain;
                }
                .user-img img{
                    width: 48px;
                    height: 48px;
                    border-radius: 50%;
                }
                .search-action{
                    /*border: 1px red solid;*/
                    width: 100px;
                    height: 40px;
                    margin-left: 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 20px;
                    padding: 2px 10px;
                    background: #bfcdda;
                    color:#ffffff;
                    font-size: 18px;
                    font-weight: 400;
                }
            }
        }

        /*导航条布局*/
        .nav{
            width: 1440px;
            margin-top: 20px;
            height: 60px;
            font-size: 24px;
            border-radius: 30px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            /*background: #333333;*/
        }

        .user-info-wrap{
            position: relative;
            width: 1440px;
            margin-top: 20px;
            height: 350px;
            /*border: 1px solid red;*/
            display: flex;
            background: #bfcdda;
            flex-direction: column;
            align-items: center;
            .user-big-icon{
                width: 140px;
                height: 140px;
                border-radius: 50%;
                margin-top: 20px;
                background: url("/static/images/thumb.png") 100% 100%;
                background-size: contain;
            }
            .user-name{
                margin-top: 10px;
            }
            .user-brief-des{
                margin-top: 10px;
            }
            .recommend-btn{
                position: absolute;
                width: 100px;
                height: 40px;
                border-radius: 5px;
                top: 10px;
                right:20px;
                line-height: 40px;
                text-align: center;
                background: #FFFFFF;
            }
        }
        .user-count-wrap{
            width: 800px;
            margin-top: 20px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            /*border: 1px solid red;*/
            .user-count-item{
                width: 100px;
                font-size: 22px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }
        }

        .grid-switch-title{
            width: 300px;
            height: 50px;
            margin:30px 0;
            display: flex;
            justify-content: space-around;
            font-size: 24px;
            /*border: 1px solid red;*/
        }
        .grid-switch-title .stores{
           border-bottom:  5px #bfcdda solid;
        }

        .contain{
            margin:50px 0 50px 50px;
            width: 1200px;
            height: 800px;
            display: flex;
            flex-direction: column;
            .title-wrap{
                height: 2000px;
                padding: 0 28px 0 40px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .title-left{
                    font-size: 20px;
                }
                .title-right{
                    position: relative;
                    .icon-magnifier{
                        position: absolute;
                        top:10px;
                        left:10px;
                        opacity: 0.4;
                    }
                }
                .title-right input{
                    width: 300px;
                    height: 50px;
                    font-size: 16px;
                    border-radius: 2px;
                    border: 0.1pt solid grey;
                    padding-left: 50px;
                }
            }
            .data-list{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-around;
                margin: 10px 0;
                .item{
                    width: 350px;
                    height: 200px;
                    margin: 10px;
                    display: flex;
                    flex-direction: row;
                    .thumb-wrap{
                        width: 80px;
                        /*height: 72px;*/
                        display: flex;
                        justify-content: center;
                    }
                    .thumb-wrap img{
                        width: 64px;
                        height: 64px;
                        margin: 30px;
                        border-radius: 50%;
                    }
                    .des{
                        display: flex;
                        flex-direction: column;
                        margin-top: 20px;
                        font-size: 20px;
                        .brief-des{
                            font-size: 16px;
                            color: #8a8a8a;
                            height: 90px;
                            margin-top: 10px;
                        }
                        .sum-box{
                            display: flex;
                            align-items: center;
                            flex-direction: row;
                            .fun-name{
                                font-size: 16px;
                                color: #8a8a8a;
                            }
                            .icon-talk{
                                width: 24px;
                                height: 24px;
                                margin-left: 80px;
                            }
                            .follow{
                                width: 60px;
                                height: 30px;
                                margin-left: 20px;
                                border-radius: 20px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-size: 14px;
                                background: white;
                                border: 1px solid #8B9CAC;
                            }
                            .follow-single{
                                width: 60px;
                                height: 30px;
                                margin-left: 20px;
                                border-radius: 20px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-size: 14px;
                                background: #8B9CAC;
                                border: 1px solid white;
                            }
                        }

                    }
                    background: rgba(240, 240, 240, 0.5);
                }
            }
        }

        /*footer布局*/
        .footer-wrap{
            display: flex;
            justify-content: center;
            background: #cccccc;
        }
        .footer{
            width: 1440px;
            height: 60px;

            display: flex;
            justify-content: space-between;
            align-items: center;
            .outer-link{
                display: flex;
                justify-content: space-around;
            }
        }
        .outer-link div a{
            margin-right: 20px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="search-header">
        <div class="search-title-wrap">
            <div class="search-title-icon"></div>
            <div class="search-title"><a href="/index.php">haishuyun</a></div>
        </div>
        <div class="search-input-wrap">
            <input class="search-input" placeholder="请输入查询内容...">
            <div class="search-icon"></div>
        </div>
        <div class="user-wrap">
            <div class="msg-wrap">
                <div class="msg-icon"></div>
                <div class="msg">消息</div>
            </div>
            <div class="user-img">
                <img src="/static/images/thumb.png" alt="暂无头像" onclick="toUser()">
            </div>
            <div class="search-action">
                <div>创作</div>
            </div>
        </div>
    </div>
    <div class="nav">
        <div><a href="">关注</a></div>
        <div><a href="">头条</a></div>
        <div><a href="">知识</a></div>
        <div><a href="">政策法规</a></div>
        <div class="nav-product"><a href="/product.php">产品服务</a></div>
        <div><a href="">招聘</a></div>
        <div><a href="">人物</a></div>
        <div><a href="">分享</a></div>
        <div><a href="">企业</a></div>
    </div>
    <div class="user-info-wrap">
        <div class="recommend-btn"><a href="javascript:volid(0)" onclick="changeFace()">修改封面</a></div>
        <div class="user-big-icon"></div>
        <div class="user-name">haishuyun</div>
        <div class="user-brief-des">这个人很懒，什么都没留下~</div>
        <div class="user-count-wrap">
            <div class="articles user-count-item">
                <div class="-num">12</div>
                <div>文章</div>
            </div>
            <div class="fun user-count-item">
                <div class="-num">5002</div>
                <div>粉丝</div>
            </div>
            <div class="follows user-count-item">
                <div class="-num">18000</div>
                <div>关注</div>
            </div>
            <div class="thumbs user-count-item">
                <div class="-num">852</div>
                <div>点赞</div>
            </div>
            <div class="comments user-count-item">
                <div class="-num">620</div>
                <div><a href="comments.php">评论</a></div>
            </div>
            <div class="stores user-count-item">
                <div class="-num">98</div>
                <div>收藏</div>
            </div>
            <div class="forwards user-count-item">
                <div class="-num">165</div>
                <div>转发</div>
            </div>
        </div>
    </div>
    <div class="grid-switch-title">
        <div class="chapter" onclick="getLists('chapter')">文章</div>
        <div class="comments" onclick="getLists('comments')">评论</div>
        <div class="stores" onclick="getLists('stores')">收藏</div>
    </div>

    <div class="contain">
        <div class="title-wrap">
            <div class="title-left">我的粉丝</div>
            <div class="title-right">
                <img class="icon-magnifier" src="/static/images/magnifier.png" alt="">
                <input class="search-keywords" name="search-keywords" id="search-keywords">
            </div>
        </div>
        <div class="data-list">
            <div class="item">
                <div class="thumb-wrap">
                    <img src="/static/images/thumb.png">
                </div>
                <div class="des">
                    <div class="nickname">紫色的小小外套</div>
                    <div class="brief-des">何以解忧，唯有暴富</div>
                    <div class="sum-box">
                        <div class="fun-name">粉丝6455</div>
                        <img class="icon-talk" src="/static/images/talk.png" onclick="toTalk()"></img>
                        <div class="follow" onclick="follow()">互关</div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="thumb-wrap">
                    <img src="/static/images/thumb.png">
                </div>
                <div class="des">
                    <div class="nickname">用户22334455</div>
                    <div class="brief-des">每一个不曾起舞的日子，都是对生命的辜负。</div>
                    <div class="sum-box">
                        <div class="fun-name">粉丝6455</div>
                        <img class="icon-talk" src="/static/images/talk.png" onclick="toTalk()"></img>
                        <div class="follow-single">回关</div>
                    </div>
                </div>
            </div>
            <div class="item">data</div>
            <div class="item">data</div>
            <div class="item">data</div>
            <div class="item">data</div>
            <div class="item">data</div>
            <div class="item">data</div>
            <div class="item">data</div>
        </div>
        <div class="rs-pagination-wrap">
            <div class="rs-pagination">
                <div class="first" id="home" onclick="activeHome()">首页</div>
                <div class="first" id="before" onclick="activeBefore()">上一页</div>
                <div id="number">
                </div>
                <div class="first" id="next" onclick="activeNext()">下一页</div>
                <div class="first" id="last" onclick="activeLast()">尾页</div>
                <div class="current"></div>
                <div class="jump">
                    <input type="text" id="inp">
                    <div class="l_jump" onclick="activeSpecial()">跳转</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer-wrap">
    <div class="footer">
        <div class="copyright">Copyright © 2023 海数云 版权所有 渝ICP备2022012388号</div>
        <div class="outer-link">
            <div><a href="">用户协议</a></div>
            <div><a href="">隐私政策</a></div>
            <div><a href="">媒体合作</a></div>
            <div><a href="">广告合作</a></div>
            <div><a href="">友情链接</a></div>
            <div><a href="">反馈建议</a></div>
        </div>
    </div>
</div>
</body>
<script>

    $(document).ready(function(){
        $(".data-1x > img").attr('src', '/static/images/data-1x.jpg');
    })

    function getLists(type){
        if ( type === 'chapter'){
            $(".grid-switch-title div").css("border-bottom", "none");
            $(".grid-switch-title .chapter").css("border-bottom", "5px #bfcdda solid");
        }
        if ( type === 'comments'){
            $(".grid-switch-title div").css("border-bottom", "none");
            $(".grid-switch-title .comments").css("border-bottom", "5px #bfcdda solid");
        }
        if ( type === 'stores'){
            $(".grid-switch-title div").css("border-bottom", "none");
            $(".grid-switch-title .stores").css("border-bottom", "5px #bfcdda solid");
        }
    }

    //修改用户封面图片
    function changeFace(){
        alert('修改封面');

    }

    //follow
    function follow(){
        alert('follow');
    }

    //进入对话
    function toTalk(){
        alert('toTalk');
    }

    //显示操作按钮
    function showOpBox(){
            let opBox = `<div class="op-box">
                <div class="edit" onclick="opEdit()">
                    <div></div>
                    <div><a href="javascript:void(0)" onclick="opEdit()">编辑</a></div>
                </div>
               <div class="delete" onclick="opDelete()">
                    <div></div>
                    <div><a href="javascript:void(0)" onclick="opDelete()">删除</a></div>
                </div>
    </div>`;
            $(".data-1x").append(opBox);
    }

    //删除操作按钮
    function deleteOpBox(){
        $(".data-1x .op-box").detach();
    }


    function opEdit(){
        alert('edit');
    }
    function opDelete(){
        alert('delete');
    }

    function toUser(){
        window.location.href="/index.php";
    }
</script>
</html>